import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image, Text } from '@tarojs/components'

import Channel from '@components/channel'
import XHead from '@components/head'
import GridList from '@components/grid'

import fm from '@assets/images/FM.png'
import everyday from '@assets/images/everyday.png'
import songList from '@assets/images/songList.png'
import rank from '@assets/images/rank.png'

// 接口
import discoveryApi from '@api/discovery'

import './common.scss'

class Personal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      banner: [], // 轮播图
      personalChannels: [
        {
          imgSrc: fm,
          text: '私人FM'
        },
        {
          imgSrc: everyday,
          text: '每日推荐',
          path: '/pages/diary/index'
        },
        {
          imgSrc: songList,
          text: '歌单'
        },
        {
          imgSrc: rank,
          text: '排行榜'
        }
      ],
      // 推荐歌单
      recommendSongs: [],
      // 推荐新音乐
      recommendNewSong: [],
      // 主播电台
      disk: []
    }
  }
  
  componentDidMount () {
    // 轮播图
    discoveryApi.carousel(2).then(res => {
      this.setState({
        banner: res.banners
      })
    })
    // 推荐歌曲
    discoveryApi.recommendSongs().then(res => {
      this.setState({
        recommendSongs: res.result.slice(0, 6)
      })
    })
    // 推荐新音乐
    discoveryApi.recommendNewSong().then(res => {
      this.setState({
        recommendNewSong: res.result.slice(0, 6)
      })
    })
    // 主播电台
    discoveryApi.djProgram().then(res => {
      this.setState({
        disk: res.result.slice(0, 6)
      })
    })
  }

  render() { 
    return (
      <View className='tab-1'>
        {/* 轮播图 */}
        <View className='tab-swipe'>
          <Swiper
            className='test-h'
            indicatorColor='#999'
            indicatorActiveColor='#DC4238'
            circular
            indicatorDots
            interval='3000'
            autoplay
          >
            {
              this.state.banner.map((item, index) => {
                return (
                  <SwiperItem key={item + index}>
                    <View className='img-list'>
                      <Image src={item.pic} />
                      <Text style={{backgroundColor: item.titleColor}}>{item.typeTitle}</Text>
                    </View>
                  </SwiperItem>
                )
              })
            }
          </Swiper>
        </View>
        {/* 频道 */}
        <Channel channels={this.state.personalChannels} />
        {/* 小栏目 */}
        <View className='column divide'>
          <XHead title='推荐歌单' />
          <View className='column-list'>
            <GridList list={this.state.recommendSongs} showTop='true' />
          </View>
        </View>
        <View className='column'>
          <XHead title='推荐音乐' />
          <View className='column-list'>
            <GridList list={this.state.recommendNewSong} />
          </View>
        </View>
        <View className='column'>
          <XHead title='主播电台' />
          <View className='column-list'>
            <GridList list={this.state.disk} />
          </View>
        </View>
      </View>
    )
  }
}
 
export default Personal